<template>
	<view class="content">
		<view style='padding:30px 20px;background-color: #f3f3f3;' @click='toAccount'>
			<view>
				<u-row align='top'>
					<u-col span='4'>
						<view>
							<text style='color:#303133;font-size:16px;'>到账银行卡</text>
						</view>
					</u-col>
					<u-col span='7'>
						<view>
							<view style='color:#303133;font-size:16px;font-weight: bold;'>
								<view v-if='bankName != ""'>
									<text>{{bankName}}</text>
									<text style='padding-left:10px'>
										({{cardNo.substr(cardNo.length - 4)}})
									</text>
								</view>
								<view v-else>
									<text style='color:#303133;font-size:16px;'>{{cardNo}} </text>
								</view>
							</view>
							<view style='color:#303133;font-size:14px;padding-top:10px'>2小到账</view>
						</view>
					</u-col>
					<u-col span='1'>
						<view style='text-align: right;padding-top:10px'>
							<u-icon name="arrow-right" color='#909399'></u-icon>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class='tips'>
				提现会收取{{rate}}%的手续费，请知悉
			</view>
		</view>

		<view style='padding:20px;background-color: #fff;border-radius: 10px 10px 0px 0px;'>
			<view style='color:#606266;padding:10px 0px;'>提现金额</view>
			<view>
				<u-row>
					<u-col span='1'>
						<view>
							<text style='font-size:25px'>￥</text>
						</view>
					</u-col>
					<u-col span='11'>
						<view>
							<u--input fontSize='25px' height='40px' border="none" v-model="price"
								type='number'></u--input>
						</view>
					</u-col>
				</u-row>
				<u-line></u-line>
				<view @click='payAll' style='padding-top:10px;color:#909399'>
					<text>当前零钱余额{{amount}}元，</text>
					<text style='color:#2979ff'>全部提现</text>
				</view>
			</view>
		</view>
		<view class='footer'>
			<view style='padding:10px'>
				<view style='padding-left:10px'>
					<u-button type='success' text='确定提现' @click='submit' shape='circle'
						:loading='loading'></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount: 0,
				cardNo: '',
				account: '',
				price: '',
				loading: false,
				immediately: false,
				bankName: '',
				payment: 'huifu',
				rate: 0
			}
		},
		onReachBottom() {

		},
		onShow() {
			this.request.get(`api/huifu-accounts`).then((res) => {
				console.log('hui', res.data)
				if (res.data.length > 0) {
					this.account = res.data[0]
					let bankName = ''
					let cardNo = res.data[0].cardInfo.card_no
					for (let i of res.data[0].qryCashCardInfoList) {
						if (i.card_no == res.data[0].cardInfo.card_no) {
							bankName = i.bank_name
						}
					}
					this.cardNo = this.maskCardNumber(cardNo)
					this.bankName = bankName
					const settleConfig = {
						settle_cycle: 'D1',
						settle_status: '0'
					}
					// 傻逼汇付的傻逼设计，不能直接关结算，只能每次访问的时候无脑访问一次
					if (this.account.cardInfo.cart_type == 1) {
						this.request.post(
							`api/huifu-accounts/${this.account.id}/user-business/modify`, {
								card_info: this.account.cardInfo,
								settle_config: settleConfig
							}).then((res) => {
							console.log('关闭结算')
						})
					}
					// 查钱包余额
					this.request.get(`api/huifu-accounts/${this.account.id}/balance`).then((res) => {
						console.log('huifuBalance', res.data)
						this.amount = res.data[0].balance_amt
					})
				} else {
					uni.showModal({
						title: '',
						content: '请先绑定提现银行卡',
						showCancel: false,
						success: () => {
							uni.redirectTo({
								url: '/pages/wallet/bank-card'
							})
						}
					})
				}

			})
		},
		onLoad() {
			this.request.get(`api/options/WITHDRAWAL_RATE`).then((res) => {
				this.rate = (parseFloat(res.data.value)*100).toFixed(2)
			})
		},
		methods: {
			payAll() {
				this.price = this.amount
			},
			toAccount() {
				uni.navigateTo({
					url: '/pages/wallet/detail'
				})
			},
			submit() {
				// loading发送中直接return
				if (this.loading) {
					return
				}
				// 提现操作
				if(this.amount <= 0){
					uni.showToast({
						title: '账户余额不足！',
						icon: 'none'
					})
					return
				}
				if (this.price <= 0) {
					uni.showToast({
						title: '请输入正确提现金额！',
						icon: 'none'
					})
					return
				}
				if (parseFloat(this.price) < 1) {
					uni.showToast({
						title: '最小提现金额为1元！',
						icon: 'none'
					})
					return
				}
				if (parseFloat(this.price) > parseFloat(this.amount)) {
					uni.showToast({
						title: '超出最大可提现金额！',
						icon: 'none'
					})
					return
				}
				if (parseFloat(this.price) > 500000) {
					uni.showToast({
						title: '单次提现限额5万！',
						icon: 'none'
					})
					return
				}

				this.loading = true
				uni.showLoading()
				this.request.post(`api/withdraws`, {
					payment: this.payment,
					amount: this.price
				}).then((res) => {
					console.log(res.data)
					uni.hideLoading()
					if (res.data.status === 'accepted' || res.data.status === 'scheduled') {
						uni.showModal({
							title: '',
							content: '申请成功，请留意银行卡信息！',
							showCancel: false,
							success: () => {
								uni.redirectTo({
									url: '/pages/wallet/withdrawal-logs'
								})
							}
						})
					} else {
						uni.showModal({
							title: '',
							content: '银行系统维护中，请稍后重试',
							showCancel: false,
						})
					}
				}).finally(() => {
					uni.hideLoading()
					this.loading = false
				}).catch(() => {
					uni.hideLoading()
					this.loading = false
				})
			},
			maskCardNumber(cardNumber) {
				if (cardNumber.length < 8) {
					return cardNumber;
				}
				var maskedNumber = cardNumber.substr(0, 4) + "*".repeat(cardNumber.length - 8) + cardNumber.substr(-4);
				return maskedNumber;
			}
		}
	}
</script>

<style>
	.content {
		/* background-color: #f3f3f3; */
		min-height: 100vh;
	}

	.tips {
		color: #909399;
		font-size: 12px;
		padding-top: 20px;
		/* background-color: #fcbd71; */
	}

	.time {
		color: #ff9900;
		padding: 0px 5px;
	}

	.card {
		background-color: #fff;
		border-radius: 5px;
	}
</style>